<template>
  <PageHeader title="排行榜"></PageHeader>
  <scroll-view scroll-y>
    <div v-for="item in Object.keys(rankingList)" :key="item">
      <uni-title align="center" :title="item"></uni-title>
      <div
        class="px-1 pt-1 pb-0.5 mb-0.5 border-b border-gray-300 w-full nowrap"
        v-for="it in rankingList[item]"
        :key="it.id"
        @click="handleClick(it)"
      >
        <span class="text-blue-900 hover:text-red-500">{{ it.name }}</span
        >/
        <span class="text-xs text-gray-400">{{ it.author }}</span>
      </div>
    </div>
  </scroll-view>
</template>
<route>
  {
     "layout": "noTabr",
  }
</route>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import request from "@/utils/request";
const rankingList = ref([]);
const getData = async () => {
  let result = await request({ url: "novel/ranking" });
  console.log(result);
  rankingList.value = result;
};
const handleClick = ({ id }: { id: number }) => {
  uni.navigateTo({
    url: `/pages/booksDetail/booksDetail?id=${id}`,
  });
};
onMounted(() => {
  getData();
});
</script>

<style></style>
